import React, { useState } from 'react';
import { connect } from 'dva';
import { Badge, Empty, Tabs, Space, Drawer, Button } from 'antd';
import { SoundOutlined, DownloadOutlined, GithubOutlined, DatabaseOutlined, SettingOutlined, LayoutOutlined } from '@ant-design/icons';
import CardDataForm from '@/components/CardDataForm';
import SettingForm from '@/components/SettingForm';
import styles from './style.less';

const { TabPane } = Tabs;

interface SideBoardProps {
  cardIns: any;
}

const SideBoard: React.FC<SideBoardProps> = ({ cardIns }) => {
  const [menuVisible, setMenuVisible] = useState(false);

  const handleShowMenu = () => {
    setMenuVisible(true);
  };

  const handleHideMenu = () => {
    setMenuVisible(false);
  };

  const handleDownload = () => {
    cardIns.save();
  };

  const toolBar = (
    <>
      <Space size="large" className={styles.toolbar}>
        <Space size="large" className={styles.icons}>
          <Badge dot><SoundOutlined onClick={handleShowMenu} /></Badge>
          <GithubOutlined />
        </Space>
        <Space size="large" className={styles.buttons}>
          <Button type="primary" shape="round" onClick={handleDownload}><DownloadOutlined />下载</Button>
        </Space>
      </Space>

      <Drawer
        title="公告"
        placement="left"
        visible={menuVisible}
        onClose={handleHideMenu}
        closable
      ><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></Drawer>
    </>
  );

  return (
    <Tabs
      className={styles.tabbar}
      tabBarGutter={64}
      defaultActiveKey="input-form"
      tabBarExtraContent={toolBar}
    >
      <TabPane tab={<span><DatabaseOutlined />数据</span>} key="input-form">
        <CardDataForm />
      </TabPane>
      <TabPane tab={<span><SettingOutlined />设置</span>} key="setting">
        <SettingForm />
      </TabPane>
      <TabPane tab={<span><LayoutOutlined />模板</span>} key="mold">
        Content of Tab Pane 2
      </TabPane>
    </Tabs>
  );
}

const mapStateToProps = ({ cardData }) => {
  const { cardIns } = cardData;
  return {
    cardIns,
  }
};

export default connect(mapStateToProps)(SideBoard);
